<template>
    <div>
        <el-drawer title="确认订单" size="90%" :visible="visible" direction="btt" :before-close="handleClose">
            <div class="order">
                <ul class="address">
                    <li @click="addressCardsVisible = true">
                        <div style="display: inline-block;vertical-align: middle;">
                            <div style="display: inline-block; vertical-align: middle;">
                                <i class="el-icon-location-outline"></i>
                            </div>
                            <div style="display: inline-block; vertical-align: middle;margin-left: 20px;">
                                <span style="font-weight: bold;">{{ acceptAddress.name }}</span>
                                <span style="font-size: 14px;color: rgb(116, 116, 116);;">{{ acceptAddress.phone
                                }}</span>

                                <p style="font-size: 13px;margin: 0;">
                                    {{ acceptAddress.area + acceptAddress.detailAddress }}
                                </p>
                            </div>
                        </div>

                        <div style="display: inline-block;vertical-align: middle; right: 0;">
                            <!-- <div style="float: right;"> -->
                            <i class="el-icon-arrow-right"></i>
                        </div>
                    </li>
                </ul>
                <div>
                    <ul class="order-info">
                        <li>
                            <a>
                                <div style="padding: 10px 10px">
                                    <img :src="productInfo.productUrl" style="width: 100px; float: left" />
                                    <div style="display: flex; justify-content: space-between">
                                        <div style="margin-right:10px">
                                            <p style="font-weight:700;font-size:15px">
                                                {{ productInfo.productName }}
                                            </p>
                                            <p style="font-size: 0.8rem">
                                                {{ order.productSpecs }}
                                            </p>
                                        </div>
                                        <div style="padding-right:5px">
                                            <p style="font-size: 1.1rem"><span
                                                    style="font-weight:bold;font-size:13px">$&nbsp;</span>{{
                                                            productInfo.outPrice
                                                    }}</p>
                                            <p style="font-size: 1rem">×{{ order.payAmount }}</p>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="pay">
                    <span class="total">合计：$&nbsp;<span style="font-size:25px">{{ order.payPrice }}</span></span>
                    <div style="padding:0 10px">
                        <button class="pay-btn-alipay" @click="payClick(0)"><span>支付宝支付</span></button>
                        <button class="pay-btn-paypal" @click="payClick(1)"><img src="../../assets/img/paypal.png"
                                alt=""></button>
                    </div>
                </div>
            </div>
        </el-drawer>
        <ShoppingAddress :addressCardsVisible.sync="addressCardsVisible" :chosenAddress.sync="chosenAddress">
        </ShoppingAddress>
    </div>
</template>

<script>
import ShoppingAddress from '../mall/components/ShoppingAddress.vue'

export default {
    components: {
        ShoppingAddress
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        acceptAddress: {
            type: Object,
            default: () => { }
        },
        productInfo: {
            type: Object,
            default: () => { }
        },
        order: {
            type: Object,
            default: () => { }
        },
        payFunction: {
            type: Function,
            default: null
        },
    },
    data() {
        return {
            addressCardsVisible: false,
            chosenAddress: {}
        };
    },
    watch: {
        chosenAddress(current){
            this.$emit("update:acceptAddress",current)
        }
    },
    methods: {
        handleClose(done) {
            this.$emit("update:visible", false);
            done();
        },
        payClick(val) {
            //   console.log("1231231231")
            this.payFunction(val);
        }
    },
}
</script>

<style lang="less">
.order {
    text-align: left;
    /* padding: 10px; */
    height: 100%;
    background-color: rgb(243, 243, 243);
}

.order .address {
    border-top: solid 1px #dcdfe6;
    margin: 0;
    padding: 0;
    background-color: #fff;


}

.order .address li {
    list-style: none;
    /* margin: 10px; */
    padding: 10px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order .address li:active {
    background-color: #eaeaea;
}

.order .order-info {
    padding: 10px;
    margin: 0;
}

.order .order-info li {
    list-style: none;
    background-color: #fff;
    height: 130px;
    border-radius: 15px;
}

.order .order-info li .el-image {
    height: 100px;
    width: 100px;
    display: inline-block;
}

.order .order-info .detail-info {
    display: inline-block;
    vertical-align: top;
    padding: 5px 0;
    display: flex;
    justify-content: space-between
}

.pay {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: 0;
    height: 100px;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    background-color: #fff;
    text-align: center;
    padding: 20px 0;

    .total {
        top: 0;
        height: 50px;
        text-align: right;
        margin-left: 20px;
        color: #FF6700;
        font-size: 16px;
        margin: 10px 0;
    }

    .pay-btn-paypal {
        width: 45%;
        height: 50px;
        border-radius: 10px;
        border: none;
        outline: none;
        background-color: #ffc439;
        vertical-align: middle;
        display: inline-block;
        margin: 10px 0;

        img {
            height: 23px;
        }
    }

    .pay-btn-paypal:active {
        background-color: rgb(238, 164, 53);
    }

    .pay-btn-alipay {
        width: 45%;
        height: 50px;
        border-radius: 10px;
        border: none;
        outline: none;
        background-color: #0ae;
        vertical-align: middle;
        display: inline-block;
        margin: 10px 0;

        span {
            font-size: 18px;
            color: #fff;
        }
    }

    .pay-btn-alipay:active {
        background-color: rgb(1, 156, 218);
    }
}
</style>